<template>
  <view class="container">
    <!-- 顶部筛选栏 -->
    <view class="filter-bar">
      <scroll-view scroll-x class="filter-scroll" show-scrollbar="false">
        <view class="filter-tabs">
          <view
              v-for="(tab, index) in tabs"
              :key="index"
              :class="['tab-item', { active: currentTab === index }]"
              @tap="handleTabChange(index)"
          >
            {{ tab }}
          </view>
        </view>
      </scroll-view>
      <view class="filter-button" @tap="showFilter">
        <uni-icons type="funnel-filled" size="20" color="#4A3728"/>
      </view>
    </view>

    <!-- 订单列表区域 -->
    <scroll-view
        scroll-y
        class="order-list"
        @scrolltolower="loadMore"
    >
      <view
          v-for="(order, index) in orders"
          :key="index"
          class="order-card"
      >
        <view class="order-header">
          <view class="shop-info">
            <uni-icons type="shop" size="16" color="#4A3728"/>
            <text class="shop-name">{{ order.shopName }}</text>
          </view>
          <text class="order-status">{{ order.status }}</text>
        </view>
        <view class="order-content">
          <image class="goods-image" :src="order.goodsImage" mode="aspectFill"/>
          <view class="order-info">
            <text class="goods-title">{{ order.goodsTitle }}</text>
            <text class="order-time">下单时间：{{ order.orderTime }}</text>
            <text class="order-number">订单编号：{{ order.orderNumber }}</text>
            <view class="price-container">
              <text class="price-label">实付款</text>
              <text class="price-value">¥{{ order.price }}</text>
            </view>
          </view>
        </view>
        <view class="order-footer">
          <uni-button
              size="mini"
              class="action-button"
              @click="handleOrderAction(order)"
          >
            {{ order.actionText }}
          </uni-button>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view
          v-for="(item, index) in tabBarItems"
          :key="index"
          class="tab-bar-item"
          @tap="handleTabBarClick(index)"
      >
        <uni-icons
            :type="item.icon"
            :size="24"
            :color="currentTabBar === index ? '#D4AF37' : '#4A3728'"
        />
        <text
            :class="['tab-text', { 'active-text': currentTabBar === index }]"
        >
          {{ item.text }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['全部', '待付款', '待发货', '待收货', '已完成'],
      currentTab: 0,
      currentTabBar: 3,
      tabBarItems: [
        { icon: 'home', text: '首页' },
        { icon: 'list', text: '分类' },
        { icon: 'cart', text: '购物车' },
        { icon: 'paperplane', text: '订单' },
        { icon: 'person', text: '我的' }
      ],
      orders: [
        {
          shopName: '古韵茶馆',
          status: '待付款',
          goodsImage: 'https://ai-public.mastergo.com/ai/img_res/6da5bcc181907bccef1743cf00707373.jpg',
          goodsTitle: '特级铁观音茶具套装 - 传统手工雕刻',
          orderTime: '2024-01-20 14:30',
          orderNumber: '202401200001',
          price: '299.00',
          actionText: '立即付款'
        },
        {
          shopName: '锦绣坊',
          status: '待发货',
          goodsImage: 'https://ai-public.mastergo.com/ai/img_res/d931c0b256a193eda8be537fb58d9aaa.jpg',
          goodsTitle: '真丝刺绣旗袍 - 牡丹花开',
          orderTime: '2024-01-19 16:45',
          orderNumber: '202401190002',
          price: '1299.00',
          actionText: '提醒发货'
        },
        {
          shopName: '墨韵轩',
          status: '待收货',
          goodsImage: 'https://ai-public.mastergo.com/ai/img_res/3948b0f88176b6bdd6b9391e46f96e99.jpg',
          goodsTitle: '紫砂文房四宝套装 - 松烟墨韵',
          orderTime: '2024-01-18 09:15',
          orderNumber: '202401180003',
          price: '499.00',
          actionText: '确认收货'
        }
      ]
    }
  },
  methods: {
    handleTabChange(index) {
      this.currentTab = index;
    },
    handleTabBarClick(index) {
      this.currentTabBar = index;
    },
    showFilter() {
      // 显示筛选面板
    },
    handleOrderAction(order) {
      // 处理订单操作
    },
    loadMore() {
      // 加载更多订单
    }
  }
}
</script>

<style>
page {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #F5E6CA;
}

.filter-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #E8D5B7;
  flex-shrink: 0;
}

.filter-scroll {
  flex: 1;
  white-space: nowrap;
}

.filter-tabs {
  display: inline-flex;
  padding: 0 20rpx;
}

.tab-item {
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  border: 1px solid #4A3728;
  border-radius: 30rpx;
  font-size: 14px;
  color: #4A3728;
}

.tab-item.active {
  background-color: #FF8C3D;
  color: #fff;
  border-color: #FF8C3D;
}

.filter-button {
  padding: 20rpx;
  margin-left: 20rpx;
}

.order-list {
  flex: 1;
  overflow: auto;
  padding: 20rpx;
}

.order-card {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.shop-info {
  display: flex;
  align-items: center;
}

.shop-name {
  margin-left: 10rpx;
  font-size: 14px;
  color: #4A3728;
}

.order-status {
  font-size: 14px;
  color: #FF8C3D;
}

.order-content {
  display: flex;
  margin-bottom: 20rpx;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.order-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.goods-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-time, .order-number {
  font-size: 12px;
  color: #999;
  margin-bottom: 10rpx;
}

.price-container {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.price-label {
  font-size: 12px;
  color: #999;
}

.price-value {
  font-size: 16px;
  color: #D4AF37;
  margin-left: 10rpx;
  font-weight: bold;
}

.order-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
}

.action-button {
  background-color: #FF8C3D !important;
  color: #fff !important;
  border-radius: 30rpx;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  background-color: #4A3728;
  flex-shrink: 0;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
}

.tab-text {
  font-size: 12px;
  color: #fff;
  margin-top: 6rpx;
}

.active-text {
  color: #D4AF37;
}
</style>
